<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分类</title>
		<!-- 移动端参数设置 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 重置样式 -->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!-- 公共样式 -->
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!-- 页面样式 -->
		<link rel="stylesheet" type="text/css" href="css/fenlei.css"/>
		<!-- 引入swiper插件样式 -->
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
		<!-- 网页图标 -->
		<link rel="shortcut icon" href="./img/b.ico"/>
	    <!-- swiper脚本 -->    
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.js"></script>
	</head>
	<body>
		
		<!-- 头部 s -->
		<header class="clearfix">
			<div class="btnFl fl">
				<a href="buy_index.html">Back</a>
			</div>
			<div class="selectBar fr">
				<select name="">
					<option value="">广州市</option>
					<option value="">佛山市</option>
					<option value="">深圳市</option>
				</select>
			</div>
			<div class="titleFl">
				分类
			</div>
		</header>		
		<!-- 头部 e -->
		
		<!-- 主体 s -->
		<section>
			<!-- 图片轮播容器 -->
	        <div class="pic_swiper">
	       	 	<div class="swiper-wrapper">
	       	 		<div href="" class="swiper-slide clearfix">
	       	 			<div class="sw fl"><a href=""><img src="img/fl1.png"/><span>美食</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl2.png"/><span>电影</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl3.png"/><span>运动</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl4.png"/><span>唱歌</span></a></div>
	       	 		</div>
	       	 		<div href="" class="swiper-slide clearfix">
	       	 			<div class="sw fl"><a href=""><img src="img/fl1.png"/><span>美食</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl2.png"/><span>电影</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl3.png"/><span>运动</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl4.png"/><span>唱歌</span></a></div>
	       	 		</div>
	       	 		<div href="" class="swiper-slide clearfix">
	       	 			<div class="sw fl"><a href=""><img src="img/fl1.png"/><span>美食</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl2.png"/><span>电影</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl3.png"/><span>运动</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl4.png"/><span>唱歌</span></a></div>
	       	 		</div>
	       	 		<div href="" class="swiper-slide clearfix">
	       	 			<div class="sw fl"><a href=""><img src="img/fl1.png"/><span>美食</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl2.png"/><span>电影</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl3.png"/><span>运动</span></a></div>
	       	 			<div class="sw fl"><a href=""><img src="img/fl4.png"/><span>唱歌</span></a></div>
	       	 		</div>
	       	 	</div>
	       	 	<!-- 分页 -->
            	<div class="swiper-pagination"></div>
	        </div>
	        <!-- 美食 -->
	        <div class="food">
	        	<div class="b_tip clearfix">
	        		<div class="tip fl">
	        			<img src="img/fl5.png"/>
	        			<span>美食类</span>
	        		</div>
	        		<div class="Fmore fr">
	        			<a href="">
	        			<span>更多</span>
	        			<img src="img/jiantou.png"/>
	        			</a>
	        		</div>
	        	</div>
	        	<div class="b_pic clearfix">
	        		<div class="bp fl"><a href=""><img src="img/images/分类_04.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_06.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_08.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_10.jpg"/></a></div>
	        	</div>
	        </div>
	        <!-- 运动 -->
	        <div class="sport">
	        	<div class="b_tip clearfix">
	        		<div class="tip fl">
	        			<img src="img/fl6.png"/>
	        			<span>运动类</span>
	        		</div>
	        		<div class="Fmore fr">
	        			<a href="">
	        			<span>更多</span>
	        			<img src="img/jiantou.png"/>
	        			</a>
	        		</div>
	        	</div>
	        	<div class="b_pic clearfix">
	        		<div class="bp fl"><a href=""><img src="img/images/分类_16.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_19.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_20.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_21.jpg"/></a></div>
	        	</div>      
	        </div>
	        <!-- 电影 -->
	        <div class="movie">
	        	<div class="b_tip clearfix">
	        		<div class="tip fl">
	        			<img src="img/fl7.png"/>
	        			<span>电影类</span>
	        		</div>
	        		<div class="Fmore fr">
	        			<a href="">
	        			<span>更多</span>
	        			<img src="img/jiantou.png"/>
	        			</a>
	        		</div>
	        	</div>
	        	<div class="b_pic clearfix">
	        		<div class="bp fl"><a href=""><img src="img/images/分类_26.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_28.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_26.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_28.jpg"/></a></div>
	        	</div>      
	        </div>
	              <!-- 美食 -->
	        <div class="food">
	        	<div class="b_tip clearfix">
	        		<div class="tip fl">
	        			<img src="img/fl5.png"/>
	        			<span>美食类</span>
	        		</div>
	        		<div class="Fmore fr">
	        			<a href="">
	        			<span>更多</span>
	        			<img src="img/jiantou.png"/>
	        			</a>
	        		</div>
	        	</div>
	        	<div class="b_pic clearfix">
	        		<div class="bp fl"><a href=""><img src="img/images/分类_04.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_06.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_08.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_10.jpg"/></a></div>
	        	</div>
	        </div>
	        <!-- 运动 -->
	        <div class="sport">
	        	<div class="b_tip clearfix">
	        		<div class="tip fl">
	        			<img src="img/fl6.png"/>
	        			<span>运动类</span>
	        		</div>
	        		<div class="Fmore fr">
	        			<a href="">
	        			<span>更多</span>
	        			<img src="img/jiantou.png"/>
	        			</a>
	        		</div>
	        	</div>
	        	<div class="b_pic clearfix">
	        		<div class="bp fl"><a href=""><img src="img/images/分类_16.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_19.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_20.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_21.jpg"/></a></div>
	        	</div>      
	        </div>
	        <!-- 电影 -->
	        <div class="movie">
	        	<div class="b_tip clearfix">
	        		<div class="tip fl">
	        			<img src="img/fl7.png"/>
	        			<span>电影类</span>
	        		</div>
	        		<div class="Fmore fr">
	        			<a href="">
	        			<span>更多</span>
	        			<img src="img/jiantou.png"/>
	        			</a>
	        		</div>
	        	</div>
	        	<div class="b_pic clearfix">
	        		<div class="bp fl"><a href=""><img src="img/images/分类_26.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_28.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_26.jpg"/></a></div>
	        		<div class="bp fl"><a href=""><img src="img/images/分类_28.jpg"/></a></div>
	        	</div>      
	        </div>
		</section>
		<!-- 主体 s -->
		
		<!-- 底部 s -->
		<footer>
			<div class="choose_page clearfix">
				<div class="shouye fl">
					<a href="buy_index.html">
						<img src="img/zy.png"/>
					</a>
					<div>首页</div>
				</div>
				<div class="fenlei fl">
					<a href="buy_fenlei.html">
						<img src="img/fl.png"/>
					</a>
					<div>分类</div>
				</div>
				<div class="faxian fl">
					<a href="buy_faxian.html">
						<img src="img/fax.png"/>
					</a>
					<div>发现</div>
				</div>
				<div class="my fl">
					<a href="buy_my.html">
						<img src="img/wod.png"/>
					</a>
					<div>我的</div>
				</div>
			</div>
		</footer>
		<!-- 底部 e -->
		
		<!--js代码 启动swiper对象-->   
		<script  type="text/javascript" charset="utf-8">
					    document.body.style.height = window.innerHeight + "px";
		    
		    /*动态改变根元素字体大小*/
		    function recalc() {
		    	// 获取客户端的宽度
		        var clientWidth = document.documentElement.clientWidth;
		        if(!clientWidth) return;
		        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
		        document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
		    }
		
		    function initRecalc() {
		        recalc();
		        // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
		        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
		        if(!document.addEventListener) return;
		        window.addEventListener(resizeEvt, recalc, false);
		        document.addEventListener('DOMContentLoaded', recalc, false);
		    }
		    initRecalc();   
		    
			var mySwiper = new Swiper(".pic_swiper", {
				direction: "horizontal", // 轮播方式的方向：横向/垂直
				loop: true, // 是否需要循环
				autoplay:true,              // 自动轮播
				pagination: { //分页
					el: '.swiper-pagination',
				},
			})
		</script>
	</body>
</html>
